<template>
  <div class="edit-page-wrap">
    <Head title="活动信息">
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="edit-form-wrap"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input
              v-model.trim="ruleForm.name"
              placeholder="请输入活动名称"
              maxlength="30"
              clearable
            />
          </el-form-item>
          <el-form-item label="活动日期" prop="dates">
            <div class="edit-date-wrap">
              <el-date-picker
                v-model="ruleForm.dates"
                popper-class="qc-date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                :disabled-date="disabledDate"
              />
            </div>
          </el-form-item>
          <el-form-item label="活动说明" prop="introduce">
            <el-input
              v-model.trim="ruleForm.introduce"
              placeholder="请输入活动说明"
              maxlength="200"
              type="textarea"
              :rows="3"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <Head title="活动配置">
      <template #tip>
        <div class="head-tip left-8">
          <div class="icon"></div>
          奖励示例：创建3级奖励梯度，分别对应的充电电量为100度、150度、300度，用户活动期间在活动电站累计充电达100度即下发100度对应的奖励，继续消费达150度，则下发150度对应的奖励。
        </div>
      </template>
      <template #content>
        <el-form
          ref="ruleFormRef1"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="edit-form-wrap"
        >
          <el-form-item label="消费维度" prop="qualifiedType">
            <el-radio-group
              v-model="ruleForm.qualifiedType"
              v-for="(item, index) in ACTIVITY_TYPE"
              :key="index"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="奖励梯度" prop="rewardGradient">
            <el-radio-group
              v-model="ruleForm.rewardGradient"
              v-for="(item, index) in optionsS.level"
              :key="index"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <div v-if="ruleForm.qualifiedType === 2">
          <GradCoupon
            ref="gradCouponRef1"
            :activityId="id"
            title="一级配置"
            level="0"
            :items="gradItems1"
            :rules="gradRules1"
            :couponsList="optionsS.coupons"
          ></GradCoupon>
          <GradCoupon
            v-if="Number(ruleForm.rewardGradient) > 0"
            ref="gradCouponRef2"
            :activityId="id"
            title="二级配置"
            level="1"
            :items="gradItems1"
            :rules="gradRules1"
            :couponsList="optionsS.coupons"
          ></GradCoupon>
          <GradCoupon
            v-if="Number(ruleForm.rewardGradient) > 1"
            ref="gradCouponRef3"
            :activityId="id"
            title="三级配置"
            level="2"
            :items="gradItems1"
            :rules="gradRules1"
            :couponsList="optionsS.coupons"
          ></GradCoupon>
        </div>
        <div v-if="ruleForm.qualifiedType === 3">
          <GradCoupon
            ref="gradCouponRef1"
            :activityId="id"
            title="一级配置"
            level="0"
            :items="gradItems2"
            :rules="gradRules2"
            :couponsList="optionsS.coupons"
          ></GradCoupon>
          <GradCoupon
            v-if="Number(ruleForm.rewardGradient) > 0"
            ref="gradCouponRef2"
            :activityId="id"
            title="二级配置"
            level="1"
            :items="gradItems2"
            :rules="gradRules2"
            :couponsList="optionsS.coupons"
          ></GradCoupon>
          <GradCoupon
            v-if="Number(ruleForm.rewardGradient) > 1"
            ref="gradCouponRef3"
            :activityId="id"
            title="三级配置"
            level="2"
            :items="gradItems2"
            :rules="gradRules2"
            :couponsList="optionsS.coupons"
          ></GradCoupon>
        </div>
        <el-form
          ref="ruleFormRef2"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="edit-form-wrap"
        >
          <el-form-item label="活动电站" prop="stationType" class="has-tips">
            <el-radio-group
              v-model="ruleForm.stationType"
              v-for="(item, index) in optionsS.stationType"
              :key="index"
              @change="handleStationType"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
            <div class="tip">
              <div class="icon"></div>
              {{
                ruleForm.stationType === '0'
                  ? '所有电站均参与活动'
                  : ruleForm.stationType === '1'
                  ? '选定运营商后，该运营商所有的电站均参与活动，含活动期间新增的电站'
                  : '选定单电站后，仅所选电站参与活动，活动期间运营商新增电站不在活动范围内'
              }}
            </div>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.stationType === '1'"
            label=""
            prop="treeOrgs"
          >
            <QcTree
              ref="treeOrgRef"
              :setCheckedKeys="ruleForm.treeOrgs"
              :data="optionsS.org"
              :showCheckbox="true"
              :checkStrictly="true"
              @handleCheck="handleCheckOrg"
            ></QcTree>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.stationType === '2'"
            label=""
            prop="treeStations"
          >
            <QcTree
              ref="treeStationRef"
              :setCheckedKeys="ruleForm.treeStations.split(',')"
              :data="optionsS.station"
              :showCheckbox="true"
              @handleCheck="handleCheckStation"
            ></QcTree>
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <Head title="可参与用户">
      <template #content>
        <el-form
          ref="ruleFormRef3"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="edit-form-wrap"
        >
          <el-form-item label="活动用户" prop="targetType" class="has-tips">
            <el-radio-group
              v-model="ruleForm.targetType"
              v-for="(item, index) in optionsS.targetType"
              :key="index"
              @change="handleTargetType"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
            <div class="tip">
              <div class="icon"></div>
              {{
                ruleForm.targetType === '0'
                  ? '所有用户均可参与活动'
                  : ruleForm.targetType === '1'
                  ? '选定企业后，该企业所有用户均可参与活动，含活动期间新增的用户'
                  : '选定标签后，该标签内所有均可参与活动，标签用户添加、删除会同步更新'
              }}
            </div>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.targetType === '1'"
            label=""
            prop="treeVehicles"
          >
            <QcTree
              ref="treeVehiclesRef"
              :setCheckedKeys="ruleForm.treeVehicles"
              :data="optionsS.vehicle"
              :showCheckbox="true"
              :checkStrictly="true"
              @handleCheck="handleCheckVehicles"
            ></QcTree>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.targetType === '2'"
            label=""
            prop="treeLabels"
          >
            <QcTree
              ref="treeLabelRef"
              :setCheckedKeys="ruleForm.treeLabels.split(',')"
              :data="optionsS.label"
              :showCheckbox="true"
              @handleCheck="handleCheckLabel"
            ></QcTree>
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <div class="edit-btn-wrap">
      <el-button type="primary" plain @click="back">取消</el-button>
      <el-button type="primary" v-btnAntiShake="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import QcTree from '@/components/qcTree/index.vue';
import GradCoupon from '../gradCoupon.vue';
import { FormInstance, FormRules } from 'element-plus';
import {
  queryActivity,
  saveUserActivity,
  updateUserActivity,
  getUserActivityById,
} from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';
import {
  stationTreeDataByChannel,
  queryCarList,
  queryVehicle,
  queryLabelListByName,
} from '@/service/apis/org';
import { ACTIVITY_TYPE } from '@/utils/dictionaries';
import { IS_DECIMAL_2, IS_DECIMAL_4 } from '@/utils/verify';

const router = useRouter();
const route = useRoute();
const {
  query: { id },
} = route;

const ruleFormRef = ref<FormInstance>();
const ruleFormRef1 = ref<FormInstance>();
const ruleFormRef2 = ref<FormInstance>();
const ruleFormRef3 = ref<FormInstance>();
const gradCouponRef1 = ref();
const gradCouponRef2 = ref();
const gradCouponRef3 = ref();
const treeOrgRef = ref();
const treeVehiclesRef = ref();

const optionsS = reactive({
  level: [] as any,
  stationType: [] as any,
  org: [] as any,
  station: [] as any,
  targetType: [] as any,
  vehicle: [] as any,
  label: [] as any,
  coupons: [] as any,
});

const orgId = window.localStorage.getItem('orgId') || '';
queryDicByParent({
  listDtos: [
    'stationTargetType',
    'stationActivityTargetType',
    'promotionalType',
    'level',
  ],
}).then((res: any) => {
  if (res) {
    optionsS.level = res.level;
    if (orgId) {
      optionsS.stationType = res.stationTargetType.filter(
        (item: any) => item.value !== '0'
      );
      ruleForm.stationType = '1';
      optionsS.targetType = res.stationActivityTargetType.filter(
        (item: any) => item.value !== '0'
      );
      ruleForm.targetType = '1';
    } else {
      optionsS.stationType = res.stationTargetType;
      optionsS.targetType = res.stationActivityTargetType;
    }
  }
});

// 获取下拉优惠券
const getCouponList = () => {
  queryActivity({}).then((res: any) => {
    optionsS.coupons = res.map((item: any) => {
      return { label: item.name, value: item.id, count: item.restCount };
    });
  });
};

// 获取电站运营商树
const getOrgs = () => {
  queryCarList({}).then((res: any) => {
    if (res) {
      optionsS.org = res;
    }
  });
};

// 获取电站树
const getStations = () => {
  stationTreeDataByChannel({ cecType: 2 }).then((res: any) => {
    if (res) {
      optionsS.station = res;
    }
  });
};

// 获取车辆机构
const getVehicle = () => {
  queryVehicle({}).then((res: any) => {
    if (res) {
      optionsS.vehicle = res;
    }
  });
};

// 获取标签
const getLabel = () => {
  queryLabelListByName({}).then((res: any) => {
    if (res) {
      optionsS.label = res.listMap;
    }
  });
};

const ruleForm = reactive({
  name: '', // 优惠券名称

  dates: [] as any, // 活动日期
  // startTime: '', // 活动开始时间
  // endTime: '', // 活动结束时间

  introduce: '', //活动说明

  qualifiedType: 2, //消费维度
  rewardGradient: '0', // 奖励梯度

  stationType: '0', //活动电站
  stationIds: '', //电站类型ids
  treeOrgs: [] as any, //限制站点数据-运营商-树
  treeStations: '', //限制站点数据-电站树
  targetType: '0', //活动用户
  targetIds: '', //活动用户ids
  treeVehicles: [] as any, //活动用户-机构树
  treeLabels: '', //活动用户-标签树
});

const disabledDate = (time: any) => {
  return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
};
const checkTreeOrg = (rule: any, value: any, callback: any) => {
  const arr: any = [];
  const treeOrg = treeOrgRef.value?.getCheckedNodes();
  treeOrg.forEach((item: any) => {
    if (item.type !== 'CHANNEL') {
      arr.push(item.id);
    }
  });
  if (arr.length === 0) {
    callback(new Error('请选择具体的电站运营商'));
  }
  callback();
};
const checkTreeVehicles = (rule: any, value: any, callback: any) => {
  const arr: any = [];
  const treeOrg = treeVehiclesRef.value?.getCheckedNodes();
  treeOrg.forEach((item: any) => {
    if (item.type !== 'CHANNEL') {
      arr.push(item.id);
    }
  });
  if (arr.length === 0) {
    callback(new Error('请选择具体的用户企业（车辆机构）'));
  }
  callback();
};
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  dates: [
    { required: true, message: '请选择活动日期', trigger: ['blur', 'change'] },
  ],
  introduce: [{ required: true, message: '请输入活动说明', trigger: 'blur' }],
  qualifiedType: [
    { required: true, message: '请选择消费维度', trigger: ['blur', 'change'] },
  ],
  rewardGradient: [
    { required: true, message: '请选择奖励梯度', trigger: ['blur', 'change'] },
  ],
  stationType: [
    { required: true, message: '请选择活动电站', trigger: ['blur', 'change'] },
  ],
  treeOrgs: [
    { required: true, message: '请选择运营商', trigger: ['blur', 'change'] },
    { validator: checkTreeOrg, trigger: ['blur', 'change'] },
  ],
  treeStations: [
    { required: true, message: '请选择电站', trigger: ['blur', 'change'] },
  ],
  targetType: [
    { required: true, message: '请选择活动用户', trigger: ['blur', 'change'] },
  ],
  treeVehicles: [
    { required: true, message: '请选择企业', trigger: ['blur', 'change'] },
    { validator: checkTreeVehicles, trigger: ['blur', 'change'] },
  ],
  treeLabels: [
    { required: true, message: '请选择标签', trigger: ['blur', 'change'] },
  ],
});

const gradItems1 = reactive({
  label: '充电电量',
  unit: '度',
  prop: 'qualifiedAmount',
  placeholder: '请输入电度数',
});
const gradItems2 = reactive({
  label: '消费金额',
  unit: '元',
  prop: 'qualifiedAmount',
  placeholder: '请输入金额',
});

const gradRules1 = reactive<FormRules>({
  qualifiedAmount: [
    { required: true, message: '请输入电度数', trigger: 'blur' },
    {
      pattern: IS_DECIMAL_4,
      message: '请输入正确的电度数，保留4位小数',
      trigger: 'blur',
    },
  ],
});
const gradRules2 = reactive<FormRules>({
  qualifiedAmount: [
    { required: true, message: '请输入金额', trigger: 'blur' },
    {
      pattern: IS_DECIMAL_2,
      message: '请输入正确的金额，保留2位小数',
      trigger: 'blur',
    },
  ],
});

const handleStationType = (val: any) => {
  if (val === '1' && optionsS.org.length === 0) {
    getOrgs();
  } else if (val === '2' && optionsS.station.length === 0) {
    getStations();
  }
};

const handleTargetType = (val: any) => {
  if (val === '1' && optionsS.vehicle.length === 0) {
    getVehicle();
  } else if (val === '2' && optionsS.label.length === 0) {
    getLabel();
  }
};

const handleCheckOrg = (data: any, checkedData: any, checkedChildData: any) => {
  ruleForm.treeOrgs = checkedChildData;
};
const handleCheckStation = (
  data: any,
  checkedData: any,
  checkedChildData: any
) => {
  ruleForm.treeStations = checkedChildData.toString();
};
const handleCheckVehicles = (
  data: any,
  checkedData: any,
  checkedChildData: any
) => {
  ruleForm.treeVehicles = checkedChildData;
};
const handleCheckLabel = (
  data: any,
  checkedData: any,
  checkedChildData: any
) => {
  ruleForm.treeLabels = checkedChildData.toString();
};

if (id) {
  getUserActivityById(id).then((res: any) => {
    if (res) {
      ruleForm.name = res.name;
      ruleForm.introduce = res.introduce;
      ruleForm.dates = [res.startTime, res.endTime];
      ruleForm.qualifiedType = res.qualifiedType;

      // comCouponRef.value?.setData(res.detailMap[0]);
      //奖励梯度
      ruleForm.rewardGradient = '0';
      if (res.detailMap.hasOwnProperty('0')) {
        nextTick(() => {
          gradCouponRef1.value?.setData(res.detailMap[0]);
        });
      }
      if (res.detailMap.hasOwnProperty('1')) {
        ruleForm.rewardGradient = '1';
        nextTick(() => {
          gradCouponRef2.value?.setData(res.detailMap[1]);
        });
      }
      if (res.detailMap.hasOwnProperty('2')) {
        ruleForm.rewardGradient = '2';
        nextTick(() => {
          gradCouponRef3.value?.setData(res.detailMap[2]);
        });
      }
      getCouponList();

      ruleForm.stationType = String(res.stationType);
      ruleForm.targetType = String(res.targetType);
      //电站树
      if (ruleForm.stationType === '2') {
        ruleForm.treeStations = res.stationIds;
        getStations();
      } else if (ruleForm.stationType === '1') {
        ruleForm.treeOrgs = res.stationIds.split(',');
        getOrgs();
      }
      // 用户树
      if (ruleForm.targetType === '1') {
        ruleForm.treeVehicles = res.targetIds.split(',');
        getVehicle();
      } else if (ruleForm.targetType === '2') {
        ruleForm.treeLabels = res.targetIds;
        getLabel();
      }
    }
  });
} else {
  getCouponList();
  if (orgId) {
    getOrgs();
    getVehicle();
  }
}

const back = () => {
  router.go(-1);
};

const emit = defineEmits(['clear-cache']);
const onSubmit = async () => {
  if (
    !ruleFormRef.value ||
    !ruleFormRef1.value ||
    !ruleFormRef2.value ||
    !ruleFormRef3.value
  )
    return;
  let flag = true;
  let objError = {} as any;
  let comData = [] as any;
  if (ruleForm.rewardGradient === '0') {
    try {
      comData = await Promise.all([
        ruleFormRef.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        ruleFormRef1.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        gradCouponRef1.value?.getData(),
        ruleFormRef2.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        ruleFormRef3.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
      ]);
    } catch (e) {}
    if (!flag || !comData[2]) {
      for (const key in ruleForm) {
        if (objError[key]) {
          ruleFormRef.value.scrollToField(key);
          ruleFormRef1.value.scrollToField(key);
          ruleFormRef2.value.scrollToField(key);
          ruleFormRef3.value.scrollToField(key);
          break;
        }
      }
      return;
    }
  } else if (ruleForm.rewardGradient === '1') {
    try {
      comData = await Promise.all([
        ruleFormRef.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        ruleFormRef1.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        gradCouponRef1.value?.getData(),
        gradCouponRef2.value?.getData(),
        ruleFormRef2.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        ruleFormRef3.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
      ]);
    } catch (e) {}
    if (!flag || !comData[2] || !comData[3]) {
      for (const key in ruleForm) {
        if (objError[key]) {
          ruleFormRef.value.scrollToField(key);
          ruleFormRef1.value.scrollToField(key);
          ruleFormRef2.value.scrollToField(key);
          ruleFormRef3.value.scrollToField(key);
          break;
        }
      }
      return;
    }
  } else if (ruleForm.rewardGradient === '2') {
    try {
      comData = await Promise.all([
        ruleFormRef.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        ruleFormRef1.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        gradCouponRef1.value?.getData(),
        gradCouponRef2.value?.getData(),
        gradCouponRef3.value?.getData(),
        ruleFormRef2.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
        ruleFormRef3.value.validate((e: any, fields: any) => {
          flag = flag ? e : false;
          if (!e) {
            objError = { ...objError, ...fields };
          }
        }),
      ]);
    } catch (e) {}
    if (!flag || !comData[2] || !comData[3] || !comData[4]) {
      for (const key in ruleForm) {
        if (objError[key]) {
          ruleFormRef.value.scrollToField(key);
          ruleFormRef1.value.scrollToField(key);
          ruleFormRef2.value.scrollToField(key);
          ruleFormRef3.value.scrollToField(key);
          break;
        }
      }
      return;
    }
  }

  // 判断梯度，需要从小到大
  if (
    Number(ruleForm.rewardGradient) > 1 &&
    (Number(comData[3][0].qualifiedAmount) <=
      Number(comData[2][0].qualifiedAmount) ||
      Number(comData[4][0].qualifiedAmount) <=
        Number(comData[3][0].qualifiedAmount))
  ) {
    ElMessage({
      showClose: true,
      message: '奖励梯度配置需要从小到大',
      type: 'warning',
    });
    return;
  } else if (
    Number(ruleForm.rewardGradient) > 0 &&
    Number(comData[3][0].qualifiedAmount) <=
      Number(comData[2][0].qualifiedAmount)
  ) {
    ElMessage({
      showClose: true,
      message: '奖励梯度配置需要从小到大',
      type: 'warning',
    });
    return;
  }

  console.log('2222-----------', ruleForm.rewardGradient);
  const form: any = {
    type: 6,
    name: ruleForm.name,
    startTime: ruleForm.dates[0],
    endTime: ruleForm.dates[1],
    introduce: ruleForm.introduce,
    qualifiedType: ruleForm.qualifiedType,
    detailMap: { 0: comData[2] },
    participatingCount: 2,
    stationType: ruleForm.stationType,
    targetType: ruleForm.targetType,
  };
  if (Number(ruleForm.rewardGradient) > 0) {
    form.detailMap['1'] = comData[3];
  }
  if (Number(ruleForm.rewardGradient) > 1) {
    form.detailMap['2'] = comData[4];
  }
  // 电站树
  form.stationIds = '';
  if (ruleForm.stationType === '1') {
    // form.stationIds = ruleForm.treeOrgs;
    const arr: any = [];
    const treeOrg = treeOrgRef.value?.getCheckedNodes();
    treeOrg.forEach((item: any) => {
      if (item.type !== 'CHANNEL') {
        arr.push(item.id);
      }
    });
    form.stationIds = arr.toString();
  } else if (ruleForm.stationType === '2') {
    form.stationIds = ruleForm.treeStations;
  }
  // form.stationIds =
  //   ruleForm.stationType === '1'
  //     ? ruleForm.treeOrgs
  //     : ruleForm.stationType === '2'
  //     ? ruleForm.treeStations
  //     : '';
  // 用户数
  form.targetIds = '';
  if (ruleForm.targetType === '1') {
    // form.targetIds =ruleForm.treeVehicles
    const arr: any = [];
    const treeOrg = treeVehiclesRef.value?.getCheckedNodes();
    treeOrg.forEach((item: any) => {
      if (item.type !== 'CHANNEL') {
        arr.push(item.id);
      }
    });
    form.targetIds = arr.toString();
  } else if (ruleForm.targetType === '2') {
    form.targetIds = ruleForm.treeLabels;
  }
  // form.targetIds =
  //   ruleForm.targetType === '1'
  //     ? ruleForm.treeVehicles
  //     : ruleForm.targetType === '2'
  //     ? ruleForm.treeLabels
  //     : '';

  console.log('form---', form, comData);
  if (id) {
    form.id = id;
    updateUserActivity(form).then((res: any) => {
      emit('clear-cache');
      back();
    });
  } else {
    saveUserActivity(form).then((res: any) => {
      emit('clear-cache');
      back();
    });
  }
};
</script>